<template>
    <div class="typeEight">
        <h2>{{ todayHot.name }}</h2>
        <div class="swiper_info">
            <div class="img" v-for="(b, i) in typeEight" :key="i">
                <router-link tag="div" :to="`/details/${b.comic_id}`">
                    <van-image width="85vw" height="61vw" lazy-load fit="cover" :src="b.cover" />
                </router-link>
                <div class="content">
                    <div class="recommend">{{ b.recommendation }}</div>
                    <h3 v-if="b.ep_short_title == '序章'">
                        {{ b.ep_short_title }}{{ b.ep_title }}
                        <span class="iconfont icon-pinglun">{{ b.ep_comment }}</span>
                    </h3>
                    <h3 v-else>
                        第{{ b.ep_short_title }}话 {{ b.ep_title }}
                        <span class="iconfont icon-pinglun"> {{ b.ep_comment }}</span>
                    </h3>

                    <p><span></span>《{{ b.comic_title }}》</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        todayHot: {
            type: Object,
            default: () => {
                return null;
            },
        },
        typeEight: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.typeEight {
    overflow: auto;
    background: #2183de;
    height: 58vh;
    h2 {
        padding: 10px 10px;
        color: #fff;
        font-size: 18px;
    }
    .swiper_info {
        display: flex;
        .img {
            border-radius: 10px;
            padding-left: 15px;

            img {
                width: 100%;
                display: block;
            }

            .content {
                background: #fff;
                padding: 10px;
                position: relative;
                top: -6px;
                width: 80vw;
                height: 20vw;
                display: inline-block;
                .recommend {
                    position: absolute;
                    bottom: 110px;
                    left: 10px;
                    color: #fff;
                    opacity: 0.9;
                }
                h3 {
                    font-size: 15px;
                    font-weight: bold;
                    padding-bottom: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 70%;
                    position: relative;
                    display: inline-block;
                    padding-right: 60px;
                    span {
                        position: absolute;
                        top: 0;
                        right: 0;
                        color: #999;
                    }
                    &::before {
                        padding-left: 10px;
                    }
                }

                p {
                    display: inline-block;
                    color: #d4b190;
                    background: #fef4e3;
                    padding: 5px 10px;
                }
            }
        }
    }
}
</style>
